<template>
  <el-dialog :title="title" :modal="false" :visible.sync="open" center :close-on-click-modal="false"
    custom-class="fence-alarm-dialog" :before-close="handleClose">
    <div class="container">
      <!-- 查询条件 -->
      <div class="search-box" ref='searchBox'>
        <div class="search-box-item" v-if="!formData.fenceID">
          <el-select v-model="queryParams.fenceID" placeholder="请选择围栏" filterable clearable default-first-option
            size='mini' popper-class='default-select-popper' @change="getList">
            <el-option v-for="item in fenceList" :key="item.fenceID" :label="item.fenceName" :value="item.fenceID">
              {{ item.fenceName }}
            </el-option>
          </el-select>
        </div>
        <div class="search-box-item">
          <el-input placeholder="请输入人员名称" v-model="queryParams.userName" clearable @change="getList">
          </el-input>
        </div>
        <div class="search-box-item" v-if="!formData.fenceID">
          <el-date-picker v-model="datetimerange" type="datetimerange" value-format="yyyyMMddHHmmss" range-separator="-"
            start-placeholder="开始时间" end-placeholder="结束时间" popper-class="custom-daterange-popper" @change="getList">
          </el-date-picker>
        </div>
        <div class="search-box-item">
          <el-button class="search-btn" @click="resetQuery">重置</el-button>
          <el-button class="search-btn" @click="getList">查询</el-button>
        </div>

      </div>

      <el-table ref="table" :height="tableHeight" header-row-class-name='custom-table-hearder'
        cell-class-name="table-cell-custom" highlight-current-row :data="tableData"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="围栏名称" prop="fenceName" />
        <el-table-column label="人员名称" prop="userName" />
        <!-- <el-table-column label="人员号码" prop="userTel" /> -->
        <el-table-column label="时间" align="center" prop="alarmTime" min-width="120">
          <template slot-scope="scope">
            <span>{{ parseStr(scope.row.alarmTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" align='left' />

      <div class="footer-btn">
        <el-button type="primary" @click="handleClear">清 空</el-button>
        <el-button type="primary" :disabled="multiple" @click="handleDelete">删 除</el-button>
        <!-- <el-button type="primary" @click="handleExport">导 出</el-button> -->
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'
import { parseStr2DateStr } from '@/utils/microsys'

export default {
  props: {
    open: Boolean,
    formData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  components: {
    Pagination,
  },
  data() {
    return {
      title: '报警记录',
      userRow: [], // 选中人员
      searchKey: '', // 查询关键字
      tableData: [], // 表格数据
      fenceList: [], //围栏数据
      // 总条数
      total: 0,
      // 选中数组
      rows: [],
      // 非多个禁用
      multiple: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        userName: '',
        userTel: '',
      },
      datetimerange: [],
      tableHeight: '0',
    }
  },
  computed: {
    ...mapGetters(['userTreeData', 'telEmployeeMap', 'id2nidMap']),
  },
  watch: {
    searchKey(val) {
      this.$refs.tree.filter(val)
    },
  },
  methods: {
    parseStr(strTime) {
      return parseStr2DateStr(strTime)
    },
    // 过滤
    getList() {
      if (this.formData.fenceID)
        this.queryParams.fenceID = this.formData.fenceID
      if (this.datetimerange && this.datetimerange.length > 0) {
        this.queryParams.startTime = this.datetimerange[0]
        this.queryParams.endTime = this.datetimerange[1]
      } else {
        this.queryParams.startTime = undefined
        this.queryParams.endTime = undefined
      }
      SDK.fenceAlarm(this.queryParams)
        .then((res) => {
          this.tableData = res.alarmList
          this.total = parseInt(res.alarmCount)
        })
        .catch((err) => {
          console.error('获取电子围栏告警记录失败', err)
          this.tableData = []
          this.total = 0
        })
    },
    // 重置按钮
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        userName: '',
        userTel: '',
      }
      this.datetimerange = []
      this.getList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.rows = selection
      this.multiple = !selection.length
    },
    // 点击删除
    handleDelete() {
      console.log('电子围栏告警删除')
      let alarmIDs = this.rows.map((item) => item.alarmID)
      SDK.deleteFenceAlarm({ alarmIDs })
        .then((res) => {
          this.getList()
        })
        .catch((err) => {
          console.error('电子围栏告警删除失败', err)
        })
    },
    // 清空
    handleClear() {
      let fenceID = this.formData.fenceID ? this.formData.fenceID : undefined
      SDK.deleteFenceAlarm({ fenceID })
        .then((res) => {
          this.getList()
        })
        .catch((err) => {
          console.err('电子围栏告警清空')
        })
    },
    // 导出
    handleExport() {
      console.log('电子围栏告警导出')
      let ids = this.rows.map((item) => item.alarmID)
      let fenceID = this.formData.fenceID ? this.formData.fenceID : undefined
      SDK.exportFenceAlarm({ ids, fenceID })
        .then((res) => {})
        .catch((err) => {
          console.err('电子围栏告警导出')
        })
    },
    // 关闭弹出窗
    handleClose() {
      this.$emit('update:open', false)
    },
    //  初始化化电子围栏
    initFenceData() {
      SDK.electronicfence()
        .then((res) => {
          this.fenceList = res
        })
        .catch((err) => {
          console.error('获取电子围栏失败', err)
        })
    },
    resizeTable() {
      if (this.$refs.table) {
        let height = this.$refs.searchBox.getBoundingClientRect().height + 45
        this.tableHeight = `calc(100% - ${height}px)`
      }
    },
  },
  mounted() {
    this.getList()
    this.initFenceData()
    this.$nextTick(function () {
      //必须在dom渲染完成后在获取不然会出现获取dom的数值错误的情况，
      this.resizeTable()
    })
    window.addEventListener('resize', this.resizeTable)
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeTable)
  },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/fence_alarm.scss';
</style>
